<template>
	<view class="pages">
		<view class="list">
			<text class="title">真实姓名</text>
			<input type="text" placeholder="请输入" v-model="formData.name" :disabled="realNameFlag" />
		</view>
		<view class="list">
			<text class="title">身份证号</text>
			<input type="text" placeholder="请输入" v-model="formData.idCard" :disabled="realNameFlag" />
		</view>
		<view class="list">
			<text class="title">手机号</text>
			<input type="digit" placeholder="请输入" v-model="formData.phone" :disabled="realNameFlag" />
			<!-- <view class="vif_btn" @click="getCode">
				{{formData.nums==0?formData.code:formData.nums}}
			</view> -->
		</view>
		<!-- <view class="list">
			<text class="title">验证码</text>
			<input type="text" placeholder="请输入" v-model="formData.verifCode" />
		</view> -->

		<view class="bottom_box" v-if="!realNameFlag">
			<view class="add_btn" @click="submitEvent">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import http from '@/uitls/http.js'
	import {
		validatePhone
	} from '@/uitls/check.js'
	import {
		realAuthCommit,
		realAuthDetail
	} from './js/api.js'
	import {onLoad} from '@dcloudio/uni-app'
	const app = getApp()
	// const showPage = ref(false)
	const formData = reactive({
		name: '',
		idCard: '',
		phone: app.globalData.phoneNumber,
		verifCode: '',
		code: '获取验证码',
		nums: 0,
	})
	const getCode = async () => {
		// if (!validatePhone(formData.phone)) return
		// const res = await logins({
		// 	phone: formData.phone,

		// })
		// const {data} = res;
		// if (res.data.code != 0) {
		// 	return http.isMssage(res.data.message)
		// }
		if (formData.nums > 0) return
		formData.nums = 60
		const intervalId = setInterval(() => {
			if (formData.nums > 1) {
				formData.nums--
			} else {
				formData.nums = 0
				formData.code = '重新获取'
				clearInterval(intervalId)
			}
		}, 1000)
	}

	const submitEvent =async () => {
		console.log('提交')
		// if(!formData.name){
		// 	return http.isMssage('请输入姓名')
		// }
		// if(!formData.idCard){
		// 	return http.isMssage('请输入身份证号')
		// }
		if (!validatePhone(formData.phone)) return 

		let params = {
			name:formData.name,
			cardNo:formData.idCard,
			phone:formData.phone
		}
		let res =await realAuthCommit(params)
		if(res.data.code == 0){
			http.isMssage('认证成功')
			app.setRealNameFlag(1)
			setTimeout(()=>{
				uni.navigateBack()
			},2000)
			
		}
	}
	const getrealAuthDetail = async ()=>{
		let res = await realAuthDetail()
		if(res.data.code == 0){
			let data = res.data.data
			formData.idCard = data.cardNo
			formData.name = data.name
			formData.phone =data.phone
		}
	}
	const realNameFlag = ref(0)
	onLoad((options)=>{
		if(options.realNameFlag == 1){
			realNameFlag.value = 1
			getrealAuthDetail()
		}
	})
</script>

<style lang="less" scoped>
	.pages{
		height: 100vh;
		background: #F6F6F6;
	}
	.list {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding: 30rpx;
		background: #FFFFFF;
		position: relative;

		.title {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
			width: 140rpx;
			text-align: left;
		}

		input {
			font-size: 28rpx;
			// width: 400rpx;
			flex: 1;
		}

		.vif_btn {
			min-width: 140rpx;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #666666;
			text-align: right;
			line-height: 40rpx;
			font-weight: 400;
			height: 100%;
			text-align: center;
			// background: #F1B13F;
			background: #999;
			border-radius: 5rpx;
			color: #FFFFFF;
			padding: 8rpx;
		}
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;
		// margin-bottom: 30rpx;
		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>